<!--
 * @Description: 第三十章（编写Vue3插件）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-20 23:22:43
-->
<template>
  <div>
    <div v-if="isShow" class="loading">Loading...</div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'

const isShow = ref<boolean>(false)

const show = () => {
  isShow.value = true
}
const hide = () => {
  isShow.value = false
}

//对外暴露 当前组件的属性和方法
defineExpose({
  show,
  hide,
  isShow,
})
</script>
<style scoped>
.loading {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;

  color: white;
}
</style>
